<template>
	<view>
		<view class="tips text-lg bg-white text-center">请绑定持卡人本人的银行卡</view>
		
		<view class="form padding-lr">
			<view class="cu-form-group">
				<view class="title">持卡人</view>
				<input type="text" placeholder-style="color:#999;font-size: 30rpx;" maxlength="16" placeholder="持账户人姓名" v-model="bankData.username" disabled/>
			</view>
			<view class="cu-form-group">
				<view class="title">卡号</view>
				<input type="number" placeholder-style="color:#999;font-size: 30rpx;" placeholder="填写银行卡 / 支付宝微信账号" v-model="bankData.cardCode"/>
				<!-- <text class="icon-zhaoxiangji iconfont text-green"></text> -->
			</view>
			<view class="cu-form-group" @tap="$wanlshop.to('/pages/user/bank/bankList')">
				<view class="title">卡类型</view>
				<view class="picker flex-sub flex justify-start">
					<view class="flex justify-end align-center" v-if="bankData.bankName">
						<image :src="$wanlshop.oss(bankData.image)"></image>
						<view class="margin-left-xs">{{bankData.bankName}} {{cardText[bankData.cardType]}}</view>
					</view>
					<view style="color: #999;font-size: 30rpx;" v-else>
						请选择
					</view>
				</view>
				<text class="wlIcon-fanhui2"></text>
			</view>
			<view class="cu-form-group">
				<view class="title">手机号码</view>
				<input type="number" placeholder-style="color:#999;font-size: 30rpx;" maxlength="11" placeholder="持账户人手机号" v-model="bankData.mobile"/>
			</view>
		</view>
		<view class="wanlian cu-bar foot">
			<button @tap="confirm" class="cu-btn bg-green lg">完成</button>
		</view>
		<view class="edgeInsetBottom"></view>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	export default {
		computed: {
			...mapState(['user'])
		},
		data() {
			return {
				cardText: ['储蓄卡','信用卡'],
				bankData: {
					username: '',
					mobile: '',
					bankCode: '',
					bankName: '',
					cardCode: '',
					cardType: 0,
					category_id: '',
					image: ''
				},
				index: -1
			}
		},
		onShow() {
			this.bankData.username = this.user.truename
		},
		methods: {
			// 后续版本添加第三方API接口，自动获取银行，验证银行卡三要素
			confirm(){
				let data = this.bankData;
				if(!data.bankCode){
					this.$wanlshop.msg('请选择银行卡');
					return;
				}
				if(!data.cardCode){
					this.$wanlshop.msg('请选择账号');
					return;
				}
				if(!data.username){
					this.$wanlshop.msg('请填写真实姓名');
					return;
				}
				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if(!data.mobile || !myreg.test(data.mobile)){
					this.$wanlshop.msg('请填写正确手机号');
					return;
				}
				this.$wanlshop.prePage().refreshList(data);
				this.$wanlshop.back(1);
			},
			bankChange(e) {
				this.index = e.detail.value;
				this.bankData.bankCode = this.bankList[e.detail.value].bankCode;
				this.bankData.bankName = this.bankList[e.detail.value].bankName;
			}
		}
	}
</script>

<style lang="less">
page {
	background-color: #fff;
}
.picker .flex image{
	width: 40rpx;
	height: 40rpx;
}
.tips {
	margin-bottom: 210rpx;
	color: #333;
}
.cu-form-group {
	padding: 0 16rpx;
	border-top: none;
	// border-bottom: 1px solid rgba(182,182,182,0.2);
	.title {
		width: 150rpx;
	}
	.iconfont {
		font-size: 44rpx;
	}
}
.wanlian {
	background-color: #fff;
	bottom: 150rpx;
	.cu-btn {
		margin: 0 auto;
		width: 428rpx;
		height: 64rpx;
		background: #4CBD66;
		border-radius: 6rpx;
	}
}
</style>